<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i>
      <span v-if="boo.type == '折扣'" class="cube-title">折扣活动详情</span>
      <span v-else-if="boo.type == '砍价'" class="cube-title">砍价活动详情</span>
      <span v-else-if="boo.type == '团购'" class="cube-title">团购活动详情</span>
      <span v-else-if="boo.type == '秒杀'" class="cube-title">秒杀活动详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item">
          <div class="title">基本信息</div>
          <div class="list">
            <span>活动名称：</span>
            <div class="right">
              <span>云途养护第二期活动</span>
            </div>
          </div>
          <div class="list" v-if="boo.type == '团购'">
            <span>活动类型：</span>
            <div class="right">
              <span>团购征集活动</span>
            </div>
          </div>
          <div class="list" v-if="boo.type == '团购'">
            <span>商户分组：</span>
            <div class="right">
              <span>KA组</span>
            </div>
          </div>
          <div class="list">
            <span>引导logo：</span>
            <div class="right">
              <img class="logo" src="/static/img/u5291.png"/>
            </div>
          </div>
          <div class="list">
            <span>引导图：</span>
            <div class="right">
              <img class="pic" src="/static/img/u168.png"/> 
            </div>
          </div>
          <div class="list" v-if="boo.type == '折扣'">
            <span>活动链接：</span>
            <div class="right">
              <span>www.baidu.com</span>
            </div>
          </div>
          <div class="list">
            <span>活动地区：</span>
            <div class="right">
              <span>
                安徽-合肥
                <el-button @click="editAdress" type="text" size="small">修改地区</el-button>
              </span>
            </div>
          </div>
          <div class="list">
            <span>类目要求：</span>
            <div class="right">
              <span>
                汽车保养-》洗车
                <el-button @click="editCategory" type="text" size="small">修改类目</el-button>
              </span>
            </div>
          </div>
          <div class="list">
            <span>报名情况：</span>
            <div class="right">
              <span>待审核：<span class="red">32</span></span><br/>
              <span>报名：<span class="red">54</span></span>
              <span>通过：<span class="red">32</span></span>
              <span>不通过：<span class="red">32</span></span>
              <span>目标：<span class="red">32</span></span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">活动时间</div>
          <div class="list">
            <span>报名时间：</span>
            <div class="right">
              <span>2019-09021 18：21：00</span>至<br/>
              <span>2019-09021 18：21：00</span>
            </div>
          </div>
          <div class="list">
            <span>活动时间：</span>
            <div class="right">
              <span>2019-09021 18：21：00</span>至<br/>
              <span>2019-09021 18：21：00</span>
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">活动要求</div>
          <div class="list">
            <span>报名要求：</span>
            <div class="right">
              <span>1、商家要求开店时间超过3个月；</span><br/>
              <span>2、必须是旗舰店商家；</span><br/>
              <span>3、店铺资质需要在三级以上；</span><br/>
            </div>
          </div>
          <div class="list">
            <span>折扣要求：</span>
            <div class="right">
              <span>1、商品折扣大于0.6；</span><br/>
              <span>2、商品总价小于500；</span><br/>
            </div>
          </div>
          <div class="list">
            <span>活动说明：</span>
            <div class="right">
            </div>
          </div>
        </div>
      </div>
      <v-detail1 v-if="boo.type == '折扣'"></v-detail1>
      <v-detail2 v-if="boo.type == '砍价'"></v-detail2>
      <v-detail3 v-if="boo.type == '团购'"></v-detail3>
      <v-detail4 v-if="boo.type == '秒杀'"></v-detail4>
    </div>
    <!-- 修改地区 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="60%">
      <div slot="title" class="header-title">
        <span class="title-name">修改地区</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <!-- <div class="title">品牌详情</div> -->
              <el-form-item label="地址：" prop="address">
                <el-cascader
                  class="tel-value"
                  v-model="currentRow.address"
                  :options="options"
                  :props="props"
                  @change="handleChange">
                </el-cascader>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 修改类目 -->
    <el-dialog  :visible.sync="boo.showDetail" class="jx-dialog" width="60%">
      <div slot="title" class="header-title">
        <span class="title-name">修改类目</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="类目：" prop="type">
                <el-cascader
                  class="tel-value"
                  v-model="currentRow.type"
                  :options="typelist"
                  :props="props"
                  @change="handleChange">
                </el-cascader>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDetail = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import vDetail1 from './detail1.vue'
  import vDetail2 from './detail2.vue'
  import vDetail3 from './detail3.vue'
  import vDetail4 from './detail4.vue'
  const address = [
    {value: '1',label: '北京', children: [{value: '1-1',label: '东城区'}]},
    {value: '2',label: '安徽', children: [{value: '2-1',label: '合肥'},{value: '2-1',label: '芜湖'}]},
  ]
  const typelist = [
    {value: '1',label: '汽车保养', children: [{value: '1-1',label: '洗车'}]},
    {value: '2',label: '汽车维修', children: [{value: '2-1',label: '轮胎'}]},
  ]
	export default {
    components: {
      vDetail1,
      vDetail2,
      vDetail3,
      vDetail4,
    },
		data() {
			return {
        boo: {
          loading: false,
          id: this.$route.query.id,
          type: this.$route.query.type,
          showDialog: false, // 修改地区
          showDetail: false, // 修改类目
          saveing: false,
        },
        detail: [
          {item1: '282982398273927',item2: '苹果iphone X',item3: '',item4: '2019-08-14 12:31:21',item5: '未注册',item6: '安徽省合肥市路演区',item7: '上海',item8: '776',item9: '0.67',item10: '21/0.21',item11: '未知'},
          {item1: '282982398273927',item2: '苹果iphone X',item3: '上官好看',item4: '2019-08-14 12:31:21',item5: '2019-08-14 12:31:21',item6: '安徽省合肥市路演区',item7: '上海',item8: '776',item9: '0.67',item10: '21/0.21',item11: '221133'}
        ],
        currentRow: {},
        props: {
          expandTrigger: 'click', 
          value: 'value',
          label: 'label',
        },
        options: address,
        typelist: typelist,
			}
		},
		mounted(){
      let _self = this
    },
		methods: {
      back(){
        history.go(-1)
      },
      editAdress(){
        let _self = this
        _self.boo.showDialog = true
      },
      editCategory(){
        let _self = this
        _self.boo.showDetail = true
      },
      submitRow(){

      },
    }
	}

</script>
<style scoped lang="sass">
  .jx-table .el-table .cell
    .icon
      width: 18px
      height: 20px
      position: relative
      top: 2px
  .jx-detail .detail-item .item_4:nth-child(2) .list span
    width: 150px
    font-size: 13px
</style>
